<template>
  <div class="app-container">
    <el-button type="primary" @click="toWorkFlow">工作流</el-button>
    <el-button type="primary" @click="showUserSelect">选择用户</el-button>
    <el-button type="primary" @click="initUser">init</el-button>
    <el-button type="primary" @click="getResult">getResult</el-button>

    <OrgSelect
        ref="userSelect"
        v-model="userSelectData"
        :enableDept="false"
        :enableRole="false"
        :multipleSize="-1"
        @ok="userSelectOk"
    />
    <div>
      <div>已选择</div>
      <span v-for="item in userSelectData">{{item.label}}, </span>
    </div>
  </div>
</template>

<script setup name="Test">
import OrgSelect from "@/components/OrgSelect";

import {getCurrentInstance, onMounted, reactive, ref} from "vue";

const { proxy } = getCurrentInstance();

const userSelectData = ref([{"id":"1","type":"user", "label": "管理员"}, {"id":"1","label":"超级管理员","type":"role","nodeKey":"role-1"}])

// 到工作流页面
function toWorkFlow() {
  proxy.$router.push({
    path: '/workFlow'
  })
}

// 显示用户选择对话框
function showUserSelect() {
  proxy.$refs.userSelect.show();
}

function initUser() {
  userSelectData.value = [{"id":"1","type":"user", "label": "管理员"}, {"id":"1","label":"超级管理员","type":"role","nodeKey":"role-1"}]
}

function userSelectOk(result) {
  console.info("userSelectOk", result)
}

function getResult() {
  let data = proxy.$refs.userSelect.getResult()
  console.info("getResult", data)
}
</script>

<style scoped>
.app-container {

}
</style>
